<!DOCTYPE html>
<!--引入thymeleaf模板引擎-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
  <meta charset="utf-8"/>
  <title>个人信息</title>
  <link rel="stylesheet" type="text/css" href="/home/css/public.css"/>
  <link rel="stylesheet" type="text/css" href="/home/css/mygrxx.css"/>
  <script type="text/javascript" src="/home/js/jquery-3.5.1.js"></script>
  <script type="text/javascript">

    //旧密码校验
    function checkOldPwd() {
      let pwdObj = $("#oldPwd");
      let password = pwdObj.val();   //获取旧密码的值
      if (pwdObj.val().trim() !== "") {
        //3.验证旧密码是否正确--ajax
        $.ajax({
          type: "post",
          url: "/view/personal/checkOldPassword",
          data: {"password": password, "user_id": $("#user_id").val()},
          dataType: "json",
          success: function (msg) {
            if (!msg) {
              pwdObj.next().addClass('error').text("原密码错误").css("color","red");
            } else {
              pwdObj.next().addClass('success').text("✔").css("color","green");
            }
          },
          error: function (xhr, status, error) {
            alert("网络不可用");
          }
        });
      } else {
        pwdObj.next().addClass('error').text("原密码不能为空").css("color","red");
      }
    }



    //校验新电话
    function checkPhone() {
      let phoneObj = $("#newPhone");
      let phone = phoneObj.val();   //获取电话的值
      let phoneZZ = /^1[3456789]\d{9}$/;
      if (phone.trim() !== "") {
        if (!phoneZZ.test(phone)) {
          phoneObj.next().addClass('error').text("电话号格式错误").css("color","red");
        } else {
          //验证新电话是否重复--ajax
          $.ajax({
            type: "get",
            url: "/system/user/checkPhone",
            data: {"phone": $("#newPhone").val()},
            dataType: "json",
            success: function (data) {
              if (!data) {
                phoneObj.next().addClass('error').text("此电话号已被占用").css("color","red");
              } else {
                phoneObj.next().addClass('success').text("✔").css("color","green");
              }
            },
            error: function (xhr, status, error) {
              alert("网络不可用");
            }
          });
        }
      } else {
        phoneObj.next().addClass('error').text("新电话号不能为空").css("color","red");
      }
    }


    //表单校验
    function checkForm() {
      checkOldPwd();
      checkPhone()
      return $("#oldPwd").next().hasClass('success') &&
              $("#newPhone").next().hasClass('success');
    }
    //使用ajax提交表单
    function updatePhone() {
      if (checkForm()) {
        $.ajax({
          type: "post",
          url: "/view/personal/editPhone",
          data: {"phone": $("#newPhone").val(), "user_id": $("#user_id").val()},
          dataType: "json",
          success: function (msg) {
            if (msg) {
              alert("电话修改成功！");
              window.location.href="/home/personal/security";
            } else {
              alert("电话修改失败，请重试");
            }
          },
          error: function (xhr, status, error) {
            alert("网络不可用");
          }
        });
      }
    }
  </script>
</head>
<body>
<!--引入顶部文件-->
<div th:replace="/home/header"></div>
<!--个人中心左侧菜单开始-->
<div class="address">
  <div class="wrapper clearfix">
    <a>当前位置：</a>
    <a href="http://localhost:8080/index.html"  style="">首页</a><span>></span>
    <a href="/view/personal/info" class="go">个人中心</a><span>></span>
    <a class="go">账号安全</a><span>></span>
    <a class="go">手机核验</a>
  </div>
</div>
<div class="Bott">
  <div class="wrapper clearfix" style="width: 1500px;margin-left: 160px;">
    <!--个人中心左侧菜单开始-->
    <div th:replace="/home/common/left_menu"></div>
    <!--个人中心左侧菜单结束-->
    <div class="you fl" style="min-height: 460px"><h2>手机核验</h2>

      <form method="post" class="remima">
        <input type="hidden" name="user_id" id="user_id" th:value="${session.user.getUser_id()}">

        <p> <span>原手机号：</span>  <span> [[${user.phone}]] </span>  <span style="color: #0e9aef">已通过核验</span></p>
        <p><span>新手机号：</span><input type="text" id="newPhone" name="phone"   required onblur="checkPhone()"/> <span></span> </p>
        <p class="op">请输入您要更改的手机号</p>
        <p> <span>登陆密码：</span><input type="password" id="oldPwd" required onblur="checkOldPwd()"/>  <span></span></p>
        <p class="op">正确输入密码才能修改手机号</p>
        <!--<p> <span>手机验证码：</span><input type="text" id="PhoneCode" required onblur=""/>  <span></span></p>
        <p class="op">请输入手机发送的验证码</p>-->
        <div style="margin-top: 30px">
          <input type="button" value="取消" onclick="history.go(-1)"/>
          <input type="button" style="margin-left: 30px;background: #FF6602FF;color: #fff" value="确认" onclick="updatePhone()"/>
        </div>
      </form>
    </div>
  </div>
</div>
<!--引入底部footer.html文件-->
<div th:replace="/home/footer"></div>
<script src="/home/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/home/js/user.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>